<template>
  <div class="comment-container">
    <!-- 评论标题 -->
    <div class="comment-title">
      <div>
        <img src="@/assets/images/comment/index.jpg" alt="图标" />
      </div>
      <span class="comment_title_text"
        >已有{{ quantity }}条评论，让我们看看你的独特见解</span
      >
    </div>
    <!-- 自己评论区域 -->
    <div class="self_comment" @click="submitComment()">
      <img v-lazy="userInfo.profile" alt="" />
      <p>有话不说憋着难受...</p>
    </div>
    <!-- 渲染文章评论列表 -->
    <ul class="article_comment_list">
      <li v-for="item in handlerPaginationNum" :key="item.id">
        <div class="comment_list">
          <div class="list_start">
            <div class="list_avatar">
              <img
                v-lazy="item.profile"
                class="img-fluid w-100 h-100 rounded-circle"
                alt=""
              />
            </div>
            <div class="list_content">
              <span class="userName">{{ item.userName | uncodeUtf16 }}</span>
              <span class="dian">:</span>
              <span class="talk">{{ item.talk | uncodeUtf16 }}</span>
              <span class="time"> {{ item.createTime | transformTime }}</span>
              <span class="reply" @click="replyComment($event, 0, item)"
                >回复</span
              >
            </div>
          </div>
          <div class="list_end">
            <i class="iconfont icon-heart-br"></i>
            <span>{{ item.agree }}</span>
          </div>
        </div>
        <div class="comment_reply">
          <div
            class="comment_reply_box"
            v-for="replyItem in item.reply"
            :key="replyItem.id"
          >
            <div class="list_start">
              <div class="list_content">
                <div class="list_avatar">
                  <img
                    v-lazy="replyItem.profile"
                    class="img-fluid w-100 h-100 rounded-circle"
                    alt=""
                  />
                </div>
                <span class="userName">
                  {{ replyItem.userName | uncodeUtf16 }}
                </span>
                <span class="fu">@</span>
                <span class="reply_name">{{ replyItem.reply_name }}</span>
                <span class="dian">:</span>
                <span class="talk">{{ replyItem.talk | uncodeUtf16 }}</span>
                <span class="time">
                  {{ replyItem.createTime | transformTime }}
                </span>
                <span class="reply" @click="replyComment($event, 1, replyItem)"
                  >回复</span
                >
              </div>
            </div>
            <div class="list_end">
              <i class="iconfont icon-heart-br"></i>
              <span>{{ replyItem.agree }}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <!-- 分页器 -->
    <div class="paginatio_container" v-show="comment.length !== 0">
      <el-pagination
        background
        :page-size="pagina.size"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="pagina.total"
      >
      </el-pagination>
    </div>
    <!-- 友情提示 -->
    <div class="hint" v-show="issueComment">
      <div class="hint_title">
        <img src="@/assets/images/comment/bell.jpg" alt="" />
        <span>友情提示</span>
      </div>
      <div class="hint_content">
        请真诚对待作者，勿发表无意义言论，字数需＞3！任何与文章内容无关、复制粘贴、违反《<a
          href="javascript:;"
          >用户规范</a
        >》等评论均删；用户每日累计3条评论被删、未来数日评论均需审核后显示；累计3日评论均被删，封号处理！（<a
          href="javascript:;"
          >详情</a
        >）
      </div>
    </div>
    <!-- 发表评论 -->
    <MyEmoji v-show="issueComment || flag === false"></MyEmoji>
  </div>
</template>

<script>
import { mapState } from "vuex";
import MyEmoji from "./Emoji";
import { offsetDomTop, scrolltoToc } from "@/utils/menuScroll";
import $ from "jquery";

export default {
  name: "MyComment",
  props: ["quantity", "article_id", "comment"],
  computed: {
    ...mapState("user", ["userInfo"]),
    // 处理分页器条数
    handlerPaginationNum() {
      let arr = [];
      let { size, current } = this.pagina;
      let start = size * (current - 1);
      let end = start + size;
      for (let i = start; i < end; i++) {
        if (!this.comment[i]) break;
        arr.push(this.comment[i]);
      }
      return arr;
    },
  },
  components: { MyEmoji },
  watch: {
    comment() {
      // 配置分页器
      this.pagina.total = this?.comment.length;
      // 如果评论条数为0，则上来就显示输入框
      if (this?.comment.length === 0) {
        this.issueComment = true;
      }
    },
  },
  data() {
    return {
      // 分页器数据
      pagina: {
        total: 0,
        size: 8,
        current: 1,
      },
      // 是否开启回复文本框
      issueComment: false,
      // 回复对象，用于给请求传参
      replyObj: {},
      // 放回复文本框的指定位置元素
      targetEl: null,
      // 回复 false/ 评论 true
      flag: null,
      // 回复文本框放置位置的高度
      replyTop: 0,
      // 增加内部边距的元素
      el: null,
      // 点击发布评论时，跳转的高度
      commentTop: 0,
    };
  },
  methods: {
    // 回复评论
    replyComment($event, flag, item) {
      this.issueComment = false;
      // 清掉上一个内边距
      this.el?.classList.remove("paddingBottom0");
      this.el?.classList.remove("paddingBottom1");
      this.el = null;
      // 确定使用回复api
      this.flag = false;
      this.replyObj = item;
      // 确定下，增加内边距的元素和插入静态数据的元素
      if (flag === 1) {
        this.targetEl =
          $event.target.parentNode.parentNode.parentNode.parentNode;
        this.el = $event.target.parentNode.parentNode.parentNode;
      } else {
        this.targetEl =
          $event.target.parentNode.parentNode.parentNode.nextElementSibling;
        // 给该元素增加内边距
        this.el = $event.target.parentNode.parentNode.parentNode;
      }
      // 获取当前点击元素距离顶部高度
      this.replyTop = offsetDomTop(this.el).top + this.el.offsetHeight;
      // flag 1 少加点，0 多加点，内边距
      flag === 1
        ? this.el?.classList.add("paddingBottom1")
        : this.el?.classList.add("paddingBottom0");
      // 评论输入框追加定位
      let emojiEl = $(".comment_emoji");
      emojiEl.css({
        position: "absolute",
        top: flag === 1 ? this.replyTop + 10 : this.replyTop,
        width: this.el.offsetWidth,
        paddingLeft: $(this.el).css("paddingLeft"),
      });
      $(".emoji_container").css({
        left: flag === 1 ? 29 : -9,
      });
    },
    // 发表评论
    submitComment() {
      // 清掉上一个内边距
      this.el?.classList.remove("paddingBottom0");
      this.el?.classList.remove("paddingBottom1");
      // 去除定位
      $(".comment_emoji").css({
        position: "relative",
        top: 0,
        paddingLeft: 0,
        width: "100%",
      });
      // 定位到文本框处
      this.commentTop =
        $(".self_comment").offset().top + $(".article_comment_list").height();
      scrolltoToc(this.commentTop);
      this.flag = true;
      this.issueComment = true;
      this.targetEl = document.querySelector(
        ".comment-container .article_comment_list"
      );
      $(".emoji_container").css({
        left: -9,
      });
    },
    // 向指定位置放置内容
    targetPutContent(flag, options) {
      // 规定内容
      let doc = null;
      if (flag) {
        doc = document.createElement("div");
        doc.className = "comment_reply_box";
        doc.innerHTML = `
        <div class="list_start">
          <div class="list_content">
            <div class="list_avatar">
              <img
                src="${options.profile}"
                class="img-fluid w-100 h-100 rounded-circle"
                alt=""
              />
            </div>
            <span class="userName">
              ${options.userName}
            </span>
            <span class="fu">@</span>
            <span class="reply_name"> ${options.reply_name} </span>
            <span class="dian">:</span>
            <span class="talk">${options.talk}</span>
            <span class="time">
              刚刚
            </span>
            <span class="reply">回复</span>
          </div>
        </div>
        <div class="list_end">
          <i class="iconfont icon-heart-br"></i>
          <span>0</span>
        </div>
      `;
      } else {
        doc = document.createElement("li");
        doc.innerHTML = `
          <div class="comment_list">
            <div class="list_start">
              <div class="list_avatar">
                <img
                  src="${options.profile}"
                  class="img-fluid w-100 h-100 rounded-circle"
                  alt=""
                />
              </div>
              <div class="list_content">
                <span class="userName">${options.userName}</span>
                <span class="dian">:</span>
                <span class="talk">${options.talk}</span>
                <span class="time">刚刚</span>
                <span class="reply">回复</span>
              </div>
              </div>  
              <div class="list_end">
                <i class="iconfont icon-heart-br"></i>
                <span>0</span>
              </div>
            </div>
        `;
      }
      if (!this.targetEl) {
        this.targetEl = document.querySelector(
          ".comment-container .article_comment_list"
        );
      }
      this.targetEl.appendChild(doc);
    },
    handleCurrentChange(val) {
      // 修改当前页码数
      this.pagina.current = val;
    },
  },
  mounted() {
    // 配置分页器
    this.pagina.total = this?.comment.length;
  },
};
</script>

<style lang="less">
.comment-container {
  margin-top: 80px;
  margin-bottom: 100px;
  .comment-title {
    display: flex;
    font-size: 20px;
    align-items: baseline;
    .comment_title_text {
      text-align: left;
    }
  }
  .self_comment {
    position: relative;
    height: 65px;
    margin-top: 20px;
    padding-left: 20px;
    img {
      position: absolute;
      left: -2px;
      top: 0;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      z-index: 1;
      border: 6px solid #ffffff;
    }
    p {
      background-color: #f6f6f6;
      height: 50px;
      color: rgba(0, 0, 0, 0.5);
      line-height: 50px;
      text-align: left;
      flex: 1 1 auto;
      padding-left: 43px;
      border-radius: 0 6px 6px 0;
      z-index: 0;
      margin-bottom: 0;
      letter-spacing: 2px;
      transition: box-shadow 0.4s, color 0.4s;
      &:hover {
        color: var(--a-button-hover-color);
        box-shadow: 0 0 10px #dedede inset;
      }
    }
  }
  .article_comment_list {
    margin-top: 10px;
    & > li {
      border-bottom: 1px solid #ebeef5;
    }
    & > li:last-of-type {
      border-bottom: 1px solid transparent !important;
    }
    i {
      font-size: 13px;
      margin-right: 2px;
    }
    .list_end {
      display: flex;
      align-items: center;
      color: #d0d0d0;
      padding: 0 6px;
      border-radius: 6px;
      cursor: url("@/assets/mouse/x2.cur"), auto !important;
      &:hover {
        background: #f3f3f3;
      }
    }
    .reply {
      cursor: url("@/assets/mouse/x2.cur"), auto !important;
    }
    .comment_list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      padding: 14px 0;
      .list_start {
        display: flex;
        align-items: center;
        position: relative;
        .list_avatar {
          min-width: 24px;
          min-height: 24px;
          max-width: 24px;
          max-height: 24px;
          margin-right: 10px;
          position: absolute;
          left: 0;
          top: 0;
        }
        .list_content {
          padding-left: 34px;
          padding-right: 30px;
        }
        .dian {
          margin: 0 10px;
        }
        .talk {
          line-height: 26px;
        }
        .time {
          font-size: 12px;
          color: #d0d0d0;
          margin-left: 16px;
        }
        .reply {
          color: #d0d0d0;
          padding: 0 6px;
          margin-left: 10px;
          border-radius: 6px;
          font-size: 12px;
          &:hover {
            background: #f3f3f3;
          }
        }
      }
      .list_end {
        color: #d0d0d0;
        font-size: 12px;
        align-self: start;
        margin-top: 4px;
      }
    }
    .comment_reply {
      padding-bottom: 2px;
      .comment_reply_box {
        margin-bottom: 12px;
        padding-left: 38px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 15px;
        .list_content {
          padding-right: 30px;
        }
        .list_start {
          display: flex;
          align-items: center;
          .list_avatar {
            min-width: 24px;
            min-height: 24px;
            max-width: 24px;
            max-height: 24px;
            margin-right: 10px;
            position: absolute;
            left: 0;
            top: 0;
          }
          .list_content {
            padding-left: 34px;
            position: relative;
            .dian {
              margin: 0 10px;
            }
            .fu {
              margin: 0 10px;
              color: #ccc;
            }
            .time {
              font-size: 12px;
              color: #d0d0d0;
              margin-left: 16px;
            }
            .talk {
              line-height: 26px;
            }
            .reply {
              color: #d0d0d0;
              padding: 0 6px;
              margin-left: 10px;
              border-radius: 6px;
              font-size: 12px;
              &:hover {
                background: #f3f3f3;
              }
            }
          }
        }
        .list_end {
          color: #d0d0d0;
          font-size: 12px;
          align-self: start;
          margin-top: 4px;
        }
      }
    }
  }
  .paginatio_container {
    box-shadow: inset 0 23px 68px 0 rgb(195 195 195 / 10%);
    padding: 10px 10px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 10px;
    font-family: "微软雅黑";
    .el-pagination {
      display: flex;
      position: relative !important;
      & > button[disabled] {
        color: #ccc !important;
        background: #f4f4f5 !important;
        opacity: 0.7 !important;
        cursor: url("@/assets/mouse/x1.cur"), auto !important;
      }
      & > button {
        border-color: #ccc0 !important;
        color: #666 !important;
        padding: 5px 10px !important;
        line-height: 1 !important;
        background: #f4f5f6 !important;
        position: absolute !important;
        width: 26px !important;
        height: 22px !important;
        &:nth-of-type(1) {
          right: 40px;
          & > i::before {
            font-size: 12px;
            content: "❮";
          }
        }
        &:nth-of-type(2) {
          right: 0px;
          & > i::before {
            font-size: 12px;
            content: "❯";
          }
        }
      }
    }
    .el-pager {
      li {
        &.active {
          background: #f4f4f5 !important;
          color: #ccc !important;
          opacity: 0.7 !important;
          cursor: url("@/assets/mouse/x1.cur"), auto !important;
          &:hover {
            color: #ccc !important;
          }
        }
        &:hover {
          color: #666 !important;
        }
        &.el-icon-d-arrow-right {
          &::before {
            line-height: 19px !important;
            content: "\e794" !important;
          }
        }
        &:not(.active) {
          cursor: url("@/assets/mouse/x2.cur"), auto !important;
        }
        font-size: 12px !important;
        border-color: #ccc0;
        color: #666;
        padding: 5px 10px;
        line-height: 1;
        background: #f4f5f6 !important;
        height: 22px !important;
        border-radius: 6px;
      }
    }
  }
  .hint {
    margin-top: 20px;
    .hint_title {
      text-align: left;
    }
    .hint_content {
      font-size: 14px;
      text-align: left;
      margin: 10px 0 16px;
      a {
        font-size: 14px;
        color: #0dce9e;
        border-bottom: 1px solid #0dce9e;
      }
    }
  }
  .paddingBottom0 {
    padding-bottom: 180px !important;
  }
  .paddingBottom1 {
    padding-bottom: 160px !important;
  }
}
</style>